<script setup>
import {ref, onMounted} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import {House,List, HotWater, Message, User} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

const active = ref('')

// 监听路由变化以更新活动状态
onMounted(() => {
  active.value = route.name.toLowerCase()
})

const switchPage = (page) => {
  active.value = page
  router.push(`/${page === 'home' ? '' : page}`)
}

const menuItems = ref([
  {id: 'home', name: '主页', icon: House},
  {id: 'hot', name: '课程', icon: List},
  {id: 'msg', name: '消息', icon: Message},
  {id: 'my', name: '我的', icon: User}
])
</script>

<template>
  <ul style="list-style: none; margin: 0; padding: 0;">
    <li
        v-for="item in menuItems"
        :key="item.id"
        :class="{ active: active === item.id }"
        @click="switchPage(item.id)"
        style="float: left; width: 25%; height: 80px; color: #393939; cursor: pointer;"
        :style="{ backgroundColor: active === item.id ? '#49BCF740' : 'transparent', color: active === item.id ? '#49BCF7' : '#393939', fontWeight: active === item.id ? 'bold' : 'normal' }"
    >
      <div class="icon" style="padding: 10px 10px 0px;">
        <el-icon :size="25">
          <component :is="item.icon"/>
        </el-icon>
      </div>
      <div>{{ item.name }}</div>
    </li>
  </ul>
</template>

<style scoped>
.clear::after {
  content: '';
  display: block;
  clear: both;
}
</style>
